<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.order_sn" placeholder="订单号" style="width: 200px;" class="filter-item"
        @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.real_name" placeholder="姓名" style="width: 200px;" class="filter-item"
        @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.mobile" placeholder="手机号码" style="width: 200px;" class="filter-item"
        @keyup.enter.native="handleFilter" />
      <el-input v-model="listQuery.idcard" placeholder="身份证号码" style="width: 200px;" class="filter-item"
        @keyup.enter.native="handleFilter" />
        <el-select v-model="listQuery.merchant_id" placeholder="请选择商户" class="filter-item">
          <el-option label="所有" value=""  />
 <el-option :label="item.merchant_name" :value="item.merchant_id"  v-for="(item,index) in merchant_list"/>
        </el-select>
        <el-select v-model="listQuery.sale_id" placeholder="请选择销售" class="filter-item">
          <el-option label="所有" value="" />
          <el-option :label="item.real_name" :value="item.sale_id"  v-for="(item,index) in sale_list"/>

        </el-select>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        Search
      </el-button>


    </div>

    <el-table :key="tableKey" v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="ID" prop="id" align="center">
        <template slot-scope="{row}">
          <span>{{ row.order_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单号码" align="center">
        <template slot-scope="{row}">
          <span>{{ row.order_sn }}</span>
        </template>
      </el-table-column>
      <el-table-column label="客户姓名" align="center">
        <template slot-scope="{row}">
          <span>{{ row.real_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号码" align="center">
        <template slot-scope="{row}">
          <span>{{ row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column label="身份证号码" align="center">
        <template slot-scope="{row}">
          <span>{{ row.idcard }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商户名称" align="center">
        <template slot-scope="{row}">
          <span>{{ row.merchant_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center">
        <template slot-scope="{row}">
          <span>{{ row.order_status_name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" class-name="status-col">
        <template slot-scope="{row}">

          {{ row.create_time|formatDate}}

        </template>
      </el-table-column>
      <el-table-column label="更新时间" class-name="status-col">
        <template slot-scope="{row}">
          {{ row.update_time|formatDate}}
        </template>
      </el-table-column>
      <el-table-column label="负责人" class-name="status-col">
        <template slot-scope="{row}">
          {{ row.sale_name}}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleRecord(row.order_id)">
            订单记录
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogRecordVisible" width="960px">
      <el-table :key="tableRecord" v-loading="listRecordLoading" :data="record_list" border fit highlight-current-row
        style="width: 100%;">
        <el-table-column label="ID" prop="id" align="center">
          <template slot-scope="{row}">
            <span>{{ row.record_id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="管理类别" align="center">
          <template slot-scope="{row}">
            <span>{{ row.type_name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作人" align="center">
          <template slot-scope="{row}">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
   <el-table-column label="操作内容" align="center">
          <template slot-scope="{row}">
            <span>{{ row.content }}</span>
          </template>
        </el-table-column>


        <el-table-column label="创建时间" class-name="status-col">
          <template slot-scope="{row}">

            {{ row.create_time|formatDate}}

          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="recordTotal>0" :total="recordTotal" :page.sync="listRecordQuery.page" :limit.sync="listRecordQuery.limit"
        @pagination="getRecordList" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRecordVisible = false">
          关闭
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    fetchAllListByMonth,
    fetchOrderRecordListByOrderId
  } from '@/api/order'
  import {formatDate} from '@/utils/formatDate.js'
  import waves from '@/directive/waves' // waves directive
  import {
    parseTime
  } from '@/utils'
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  export default {
    name: 'ComplexTable',
    components: {
      Pagination
    },
    directives: {
      waves
    },
   filters:{
   	formatDate(time) {
   	        time = time * 1000
   	        let date = new Date(time)

   	        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
   	      }
   },
    data() {
      return {
        tableKey: 0,
        tableRecord: 1,
        list: null,
        record_list: null,
        listRecordLoading: true,
        recordTotal: 0,
        total: 0,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 20,
          real_name: '',
          mobile: '',
          idcard: '',
          customer_id:'',
          merchant_id:'',
          sale_id:'',
          unix_date:'',
          order_status: '0'
        },
        listRecordQuery: {
          page: 1,
          limit: 20,
          order_id: ''
        },
        textMap: {
          record: '订单记录',
          create: 'Create'
        },
         merchant_list:[],
         sale_list:[],
        dialogRecordVisible: false,
        dialogStatus: '',
        downloadLoading: false
      }
    },
    created() {
      this.listQuery.unix_date=this.$route.params.unix_date,
      this.listQuery.customer_id=this.$route.params.customer_id
      this.getList()
    },
    methods: {
      getList() {
        this.listLoading = true
        fetchAllListByMonth(this.listQuery).then(response => {
          this.list = response.data.data.list
          this.total = response.data.data.count
          this.merchant_list=response.data.sale_merchant.merchant
          this.sale_list=response.data.sale_merchant.sale
          setTimeout(() => {
            this.listLoading = false
          }, 0.1 * 1000)
        })
      },
      handleFilter() {
        this.listQuery.page = 1
        this.getList()
      },

      getRecordList() {
        this.listRecordLoading = true
        fetchOrderRecordListByOrderId(this.listRecordQuery).then(response => {
          this.record_list = response.data.list
          this.recordTotal = response.data.count
          setTimeout(() => {
            this.listRecordLoading = false
          }, 1.0 * 1000)
        })
      },
      handleRecord(order_id) {
        console.log(order_id)
        this.dialogStatus = 'record'
        this.dialogRecordVisible = true
        this.listRecordQuery.order_id = order_id
        fetchOrderRecordListByOrderId(this.listRecordQuery).then(res => {
          this.record_list = res.data.list
          this.recordTotal = res.data.count
          setTimeout(() => {
            this.listRecordLoading = false
          }, 1.0 * 1000)

      })
  },



  }
  }
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    float: left;
  }
</style>
